import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
  state = {
    count: 0,
    isShow: true
  }
  inputRef = React.createRef()
  render() {
    return (
      <div>
        <h1>App</h1>
        <button onClick={this.handleClick}>点击</button>
        <div>点击次数:{this.state.count}</div>
        <hr />
        {
          this.state.isShow ? (<button onClick={this.btn}>按钮</button>) :
            (<input ref={this.inputRef} type="text" placeholder='请输入内容' />)
        }
      </div>
    )
  }
  btn = () => {
    this.setState({
      isShow: !this.state.isShow
    }, () => {
      this.inputRef.current.focus()
    })
  }
  handleClick = () => {
    // this.setState({  //异步
    //   // this.setState会更新dom，异步的，如果是同步等dom更新会堵死
    //   count: this.state.count + 1 //1
    // })
    this.setState(state => ({ count: state.count + 1 }))
    this.setState({
      count: this.state.count + 1
    }, () => {
      console.log(this.state.count); //1
    })
    // console.log(this.state.count); //0
  }
}
ReactDOM.render(<App></App>, document.getElementById('root'))